<html>
<head>
    <title>script.aculo.us – Slider Input Demo</title>
    <script src="http://ajax.googleapis.com/ajax/libs/prototype/1.7.1.0/prototype.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.9.0/scriptaculous.js" type="text/javascript"></script>
    <script type="text/javascript">
    window.onload = function(){
        // Turn the element with an ID of ageHandle into the draggable
        // slider handle and the element with an ID of ageBar into the
        // slider bar
        new Control.Slider( 'ageHandle', 'ageBar', {
            // When the slider is moved, or finished moving,
            // call the updateAge function
            onSlide: updateAge
        });

        // Handles any movements that occur within the slider
        function updateAge(v) {
            // When the slider updates, update the value of the age
            // element to represent the user's current age
            $('age').value = Math.floor( v * 100 );
        }
    };
    </script>
</head>
<body>
    <h1>Slider Input Demo</h1>

    <form action="" method="POST">
        <p>How old are you? <input type="text" name="age" id="age" /></p>

        <div id="ageBar" style="width:200px; background: #000; height:5px;">
            <div id="ageHandle" style="width:5px; height:10px; 
                background: #000; cursor:move;"></div>
        </div>

        <input type="submit" value="Submit Age"/>
    </form>
</body>
</html>

